<template>
	<view style="position: relative;">
		<view style="background-color: white;">
			<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
					<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
				<view style="padding: 20rpx;">
					<u-form-item label="姓名" prop="name" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.name"/>
					</u-form-item>
					<u-form-item label="手机" prop="mobile" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.mobile"/>
					</u-form-item>
					<u-form-item label="申请级别" prop="level" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.level"/>
					</u-form-item>
					<u-form-item label="申请区域" prop="area" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.area"/>
					</u-form-item>
					<u-form-item label="商圈" prop="circle" :labelWidth="labelWidth" required labelPosition="left" >
						<input placeholder="请输入" v-model="info.circle"/>
					</u-form-item>
			</view>
			<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
				<view style="padding: 20rpx;">
					<u-form-item label="上传营业执照照片" prop="fuli_value" :labelWidth="140" required labelPosition="top" >
						<image src="/static/images/verify_pic3.png" class="verify"></image>
					</u-form-item>
				</view>
					<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
				<view style="padding: 20rpx;">
					<u-form-item label="上传法人身份证照片" prop="fuli_value" :labelWidth="140"  labelPosition="top" required>
						<view class="col">
							<image src="/static/images/verify_pic1.png" class="verify"></image>
							<image src="/static/images/verify_pic2.png" class="verify"></image>
						</view>
					</u-form-item>
				</view>
					<view style="height: 20rpx;background-color:  #F2F3F8;"></view>
					<view style="padding: 20rpx;">
						<u-form-item label="个人简介" prop="desc" :labelWidth="labelWidth" required labelPosition="top" :borderBottom="true">
							<u--textarea v-model="info.desc" placeholder="请输入内容" count border="none"
								:maxlength="50"></u--textarea>
						</u-form-item>
					</view>
			
			</u--form>
			</view>	
			<view style="height: 150rpx;"></view>
				<view class="bottom"><view class="btn2 row-center">提交</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth:120,
				info:{
					name:'',
					mobile:'',
					level:'',
					area:'',
					circle:'',
					license:'',
					pic1:'',
					pic2:'',
					desc:'',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入开户名称',
						trigger: ['blur', 'change']
					},
				'mobile': {
					type: 'string',
					required: true,
					message: '请输入预留手机',
					trigger: ['blur', 'change']
				},
				'level': {
					type: 'string',
					required: true,
					message: '请输入预留手机',
					trigger: ['blur', 'change']
				},
					'area': {
						type: 'string',
						required: true,
						message: '请输入银行账号',
						trigger: ['blur', 'change']
					},
					'circle': {
						type: 'string',
						required: true,
						message: '请输入银行账号',
						trigger: ['blur', 'change']
					},
				'license': {
					type: 'string',
					required: true,
					message: '请上传营业执照照片',
					trigger: ['blur', 'change']
				},
				'pic1': {
					type: 'string',
					required: true,
					message: '请上传身份证正面',
					trigger: ['blur', 'change']
				},
				'pic2': {
					type: 'string',
					required: true,
					message: '请上传身份证国徽面',
					trigger: ['blur', 'change']
				},
				'desc': {
					type: 'string',
					required: true,
					message: '请输入个人简介',
					trigger: ['blur', 'change']
				},
					}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.bottom{
		width: 100%;
		padding: 36rpx;
		background-color: white;
		bottom: 0;
		position: fixed;
		.btn2{
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			background: #347FFF;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx; /* 150% */
		}
	}
	.verify{
		margin-top: 20rpx;
		width: 470rpx;
		height: 280rpx;
	}
</style>
